<template>
  <div class="hol-container container">
    <el-row>
      <el-date-picker
        v-model="planDate"
        style="width: 200px;margin-left: 10px"
        type="month"
        size="mini"
        placeholder="选择日期"
        format="yyyy 年 MM 月"
        value-format="yyyy-MM-dd"
        @change="dateChange"
      />
    </el-row>
    <el-calendar v-model="value" v-permission="['83001']">
      <template slot="dateCell" slot-scope="{data}">
        <div slot="reference" class="date-cla">
          <div class="calendar-day">
            <span class="calendar-day-span">{{ data.day.split('-').slice(2).join('-') }}</span>
          </div>
          <div class="selected-con">
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                <div v-if="isNowMonth(data.day)">
                  <el-tag :type="retHolidayType(data.day)"> {{ retHolidayName(data.day) }} </el-tag> <i v-permission="['83002']" class="el-icon-caret-bottom" />
                </div>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-permission="['83002']" :command="beforeHandleCommand('', data.day)">工作日</el-dropdown-item>
                <el-dropdown-item v-permission="['83002']" :command="beforeHandleCommand('weenkend', data.day)">周末</el-dropdown-item>
                <el-dropdown-item v-permission="['83002']" :command="beforeHandleCommand('statutory', data.day)">节假日</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </template>
    </el-calendar>
  </div>
</template>

<script>
import Moment from 'moment'
import { getPublicHolidayList, createPublicHolidayList, updatePublicHolidayList } from '@/api/base'
export default {
  name: 'BaseHolidays',
  data() {
    return {
      value: Moment(new Date()).format('YYYY-MM-DD'),
      planDate: Moment(new Date()).format('YYYY-MM-DD'),
      calendarData: []
    }
  },
  async mounted() {
    this.init()
  },
  methods: {
    async init() {
      const res = await getPublicHolidayList({ year: this.planDate.substring(0, 4), month: this.planDate.substring(5, 7) })
      if (res.ret === 0) {
        this.calendarData = res.data
      }
    },
    async dateChange() {
      this.value = this.planDate
      this.init()
    },
    // 判断是否是当月数据，不是当月不显示
    isNowMonth(date) {
      const month = this.planDate.substring(5, 7)
      const NowMonth = date.substring(5, 7)
      return month === NowMonth
    },
    beforeHandleCommand(command, date) {
      return {
        'command': command,
        date
      }
    },
    retHolidayName(date) {
      let name = '工作日'
      const obj = this.calendarData.find((item) => { return item.public_holiday_date === date })
      if (obj) {
        switch (obj.holiday_type) {
          case 'statutory':
            name = '节假日'
            break
          case 'weenkend':
            name = '周末'
            break
          default:
            name = '工作日'
            break
        }
      }
      return name
    },
    retHolidayType(date) {
      let type = 'success'
      const obj = this.calendarData.find((item) => { return item.public_holiday_date === date })
      if (obj) {
        switch (obj.holiday_type) {
          case 'statutory':
            type = 'danger'
            break
          case 'weenkend':
            type = 'warning'
            break
          default:
            type = 'success'
            break
        }
      }
      return type
    },
    handleCommand(command) {
      const date = command.date
      const obj = this.calendarData.find((item) => { return item.public_holiday_date === date })
      if (obj) {
        this.updatePublicHolidayList(obj, command)
      } else {
        this.createPublicHolidayList(command)
      }
    },
    async createPublicHolidayList(command) {
      const prams = {
        holiday_name: command.command, public_holiday_date: command.date, holiday_type: command.command
      }
      const res = await createPublicHolidayList(prams)
      if (res.ret === 0) {
        this.$message.success('操作成功')
        this.init()
      }
    },
    async updatePublicHolidayList(obj, command) {
      const prams = {
        id: obj.ID, holiday_name: command.command, public_holiday_date: obj.public_holiday_date, holiday_type: command.command
      }
      const res = await updatePublicHolidayList(prams)
      if (res.ret === 0) {
        this.$message.success('更新成功')
        this.init()
      }
    }
  }
}
</script>

<style lang="scss">
.selected-con {
  margin-top: 10px;
}
.hol-container {
  .el-calendar__body {
    table {
      thead {
        background-color:#F7F9FA;
      }
    }
  }
  .el-calendar-day {
    padding: 0;
    height: auto;
    min-height: 100px;
  }
  .el-calendar__header {
    display: none;
  }
}
</style>

<style lang="scss" scoped>
  .date-cla {
    padding: 8px;
    width: 100%;
    height: 100%;
    min-height: 100px;
  }
</style>
